/**
 * @name DownLoad
 * @description 下载进度条
 */
import React, { Component } from "react";
import axios from "axios";
import { isDev } from "@/utils/axios";
import { Title } from "@/component";
import { Button, Progress, message } from "antd";
import { unitConver } from "@/utils";

import styles from "./styles.module.less";

export default class DownLoad extends Component {
  state = {
    progress: 0,
    visible: false,
    size: 0
  };
  /**
   * 下载
   * @param  {String} url 目标文件地址
   * @param  {String} filename 想要保存的文件名称
   */
  //第1PPT地址-/api-down-progress：跨域代理=》http://ppt.1ppt.com
  // /api-down-progress/uploads/soft/2006/1-200622214532.zip  size:1.63M
  // /api-down-progress/uploads/soft/2001/1-200121232528.zip  size:6.98M
  // /api-down-progress/uploads/soft/1807/2-1PG30T113.rar     size:229KB
  download = () => {
    let url = "/api-down-progress/uploads/soft/2001/1-200121232528.zip";
  
    console.log("down===", url);
    this.setState({ visible: true });
    setTimeout(() => {
      axios({
        method: "get",
        url,
        responseType: "blob",
        // headers: { Authorization: token },
        onDownloadProgress: (evt) => {
          // console.log("progressEvent===",evt )
          // 对原生进度事件的处理
          this.setState({ progress: parseInt((evt.loaded / evt.total) * 100), size: evt.total });
        }
      })
        .then((res) => {
          // console.log("res===", res);
          // let type = res.headers["content-type"]; //请求头中文件类型
          let Content = res.headers["Content-Disposition"] || res.headers["content-disposition"]
          console.log("Content===",res, Content);
          let name = Content.split(";")[1].split("=")[1]; //请求头中文件名
          const blob = new Blob([res.data]);
          if ("download" in document.createElement("a")) {
            // 非IE下载
            const elink = document.createElement("a");
            elink.download = name;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          } else {
            // IE10+下载
            navigator.msSaveBlob(blob, name);
          }

          setTimeout(() => {
            this.setState({ visible: false, progress: 0, size: 0 });
          }, 3000);
        })
        .catch((err) => {
          this.setState({ visible: false, progress: 0, size: 0 });
          message.error("下载错误");
          console.log("下载错误", err);
        });
    }, 2000);
  };

  render() {
    const { visible, progress, size } = this.state;
    return (
      <div>
        <div className={styles.block}>
          <Title text="下载进度条" />
          {visible && (
            <div>
              <Progress percent={progress} />
              {unitConver(size)}
            </div>
          )}
          <Button onClick={this.download}>下载</Button>
        </div>
      </div>
    );
  }
}
